<template>
	<view class="action-sheet" v-if="isOpen">
		<view class="masker" :class="{show: maskShow}" @tap="close"></view>
		<view class="lists" :style="'bottom: ' + (listShow ? bottom : '-400rpx') + ';'">
			<view class="item" v-for="(item,index) in actions" @tap="onSelect" :data-action="item.action" :data-index="index">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			actions: {
				type: Array,
				default: () => {
					return []
				}
			},
			data: {
				type: String/Number,
				default: ''
			},
			bottom: {
				type: String,
				default: '50px'
			}
		},
		data() {
			return {
				isOpen: false,
				maskShow: false,
				listShow: false
			}
		},
		created() {
			
		},
		methods: {
			open() {
				this.isOpen = true
				setTimeout(() => {
					this.maskShow = true
					this.listShow = true
				}, 10)
			},
			close() {
				this.maskShow = false
				this.listShow = false
				setTimeout(() => {
					this.isOpen = false
				}, 200)
			},
			onSelect(e) {
				let action = e.currentTarget.dataset.action
				let index = e.currentTarget.dataset.index
				let data = this.data
				this.$emit('select', {
					action: action,
					index: index,
					data: data
				})
				this.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
.action-sheet {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 99;
	.masker {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		background: rgba(0, 0, 0, 0.3);
		opacity: 0;
		transition: opacity 0.2s linear;
		&.show {
			opacity: 1;
		}
	}
	.lists {
		position: absolute;
		width: 100%;
		left: 0;
		background: #fff;
		z-index: 2;
		transition: all 0.2s linear;
		.item {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			border-bottom: 1px solid #eee;
			letter-spacing: 1px;
			&:last-child {
				border: none;
			}
			&:active {
				background: #f7f7f8;
			}
		}
	}
}
</style>